<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>美图随心看</title>
<meta name="referrer" content="no-referrer" />
<meta name="referrer" content="same-origin">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
<%@ include file="securty.jsp" %>
		<style>
.img_show {
 	padding: 12px;
	-webkit-transition: all 0.4s;
	_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>200?"200px":"");
}

.img_show:hover {
	transform: scale(2, 2);
	-webkit-transform: scale(2, 2);
	-moz-transform: scale(2, 2);
	-ms-transform: scale(2, 2);
	-o-transform: scale(2, 2);
	border: 1px solid #eee;
	box-shadow: 1px 1px 2px #888888;
}

#totop{
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #e3e3e3;
    font-size: 20px;
    text-align:center;
    position: fixed;
    border:1px solid  #A7A4AD;
    right: 60px;
    bottom: 80px;
}
   
</style>

	<!--[if lt IE 9]>
	<script src="${ctx}/js/jquery-1.11.1.min.js"></script>
	<![endif]-->
	<!--[if gte IE 9]><!-->
	<script src="${ctx}/js/jquery-2.0.3.min.js"></script>
	<!--<![endif]-->

<script type="text/javascript" src="${ctx}/layer/layer.js"></script>
<script type='text/javascript'>
<!--
if (top.location != self.location)top.location=self.location;
var autocatch="<%=JandanController.autocatch%>"=="false"?false:true ;
var page={
	longtime:"${longtime}",
	pageNumber:"${meizi.pageNumber}" ,
	pageSize:"${meizi.pageSize}" ,
	totalPage:"${meizi.totalPage}" ,
	totalRow:"${meizi.totalRow}" ,
	isLoading:"false"
};

function get(ts){
	ts.style.display = 'block';  //显示图片
}

$(document).ready(function() {

	var getTlp=function(m){
		var html=[];
		html.push("<a href=\"javascript:void(0)\" class=\"image\">");
		html.push("<img src='"+m.small+"' src_big='"+m.big+"'  src_md5='"+m.md5+"' onerror='javascript:this.remove()' referrerpolicy='no-referrer'  ");
		html.push("class=\"img_show\" style='max-height:200px; '/></a>");
		return html.join("");
	}

	var loadPageInfo=function(info){
		page.pageNumber=info.pageNumber;
		page.pageSize=info.pageSize;
		page.totalPage=info.totalPage;
		page.totalRow=info.totalRow;
	}

	var  _G_color=[] , init__G_color=function(){
		for(var i=0;i<200;i++){
			var c1=1+Math.ceil(Math.random()*255);
			var c2=1+Math.ceil(Math.random()*255);
			var c3=1+Math.ceil(Math.random()*255);
			_G_color.push( "rgb("+c1+","+c2+","+c3+")" ) ;
		}
	} ;

	var hasNew=function(){
		var url="${ctx}/_hasNew", q=0 ;
		if( _G_color.length<1 ) { init__G_color(); } ;
		var get_color=function(e){ return _G_color[e] } ;
		$.post(url,{longtime:page.longtime},function(dt){
			if(dt.retcode>0){
				setInterval(function(){  //闪瞎你的狗眼
					var co=get_color( q++ % _G_color.length );
					$(".hasNew").css({color:co}).html("<span>有新照片,该刷新页面啦</span>") ;
				},0.2*1000);
				clearInterval(page.hasNew);
			}
		});
	}

	var check_meizi=function(meizis){
		$.each( meizis  ,function(i,m){
			 var img=$("img[src_md5='"+m.md5+"']") ;
			 if(img){
				 img.on("error",function(){
					 //console.log(m.md5+" | " + img.height() ) ;
					 img.parents("a").hide().remove();
					 //$.post("${ctx}/remove",{md5:m.md5},function(dt){});
				 });
			 }
		});
	} ;

	var more_meizi=function(){
		var url="${ctx}/_more";
		if( page.pageNumber>page.totalPage-1 ) {
			$(".more").parent().html("没有更多了");
			return ;
		}
		if("true" == page.isLoading ) return ;
		page.isLoading="true";

		$.post(url,{page:++page.pageNumber,longtime:page.longtime},function(dt){
			if(dt.retcode!=0) return ;
			loadPageInfo(dt.meizis);
			var html=[];
			$.each(dt.meizis.list,function(i,meizi){
				var tlp=getTlp(meizi);
				html.push(tlp);
			});
			setTimeout( function(){ $(".imgs").append(""+html.join("")+" " ); },600);
			setTimeout( function(){ check_meizi( dt.meizis.list ); },3000);
      page.isLoading="false";

		});
	} ;

	$(".imgs").on('click',".img_show",function(){
		  var src=$(this).attr("src_big");
		  var md5=$(this).attr("src_md5");
		 window.open("${ctx}/meizi/"+md5);
	});

	$(".flash").click(function(){
		window.location.reload();
	});

	if( autocatch ) {
		$(".catch").hide();
	} else {
		$(".catch").click(function(){
			var url="${ctx}/_catch";
			$.post(url,{},function(dt){
				console.log(dt);
				if(dt.retcode!=0) return ;
				$(".alert").html("正在抓取...");
				setTimeout(function(){
					$(".alert").fadeOut(2000) ;
				},2000);
			});
		});
	}

	$(".config").click(function(){
		var src="${ctx}/config"
		 window.open(src);
	});


	$(".logout").click(function(){
		var src="${ctx}/logout"
		//  window.open(src);
		window.location.href=src;
	});

	$(".login").click(function(){
			var src="${ctx}/login"
			//  window.open(src);
			window.location.href=src;
		});

	$(".del").click(function(){
		var src="${ctx}/del"
		window.open(src);
	});
	$(".more").click( more_meizi() );


	/// http://www.jb51.net/article/76645.htm

	 //获取页面顶部被卷起来的高度
 function scrollTop(){
  return Math.max(
   //chrome
   document.body.scrollTop,
   //firefox/IE
   document.documentElement.scrollTop);
 }
	//获取页面文档的总高度
 function documentHeight(){
  //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }
 //获取页面浏览器视口的高度
 function windowHeight(){
  //document.compatMode有两个取值。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
  return (document.compatMode == "CSS1Compat")?
  document.documentElement.clientHeight:
  document.body.clientHeight;
 }


	var	lastRequestTimestamp = 0;
	/*定义滚动函数*/
	function onScroll(event) {
		if(scrollTop() + windowHeight() >= (documentHeight() - 100/*滚动响应区域高度取100px*/)){
	     var currentTime = new Date().getTime();
		    if (lastRequestTimestamp < currentTime - 10) {
					 lastRequestTimestamp = currentTime;
					 more_meizi();
				}
	  }
	  
	};
	$(document).keydown(function(event) {
        switch (event.keyCode) {
            case 40:  //
                more_meizi();
        }
	}) ;

    $(window).on('scroll', onScroll);

    setInterval( function() {  onScroll("onScroll"); }, 100);
    page.hasNew=setInterval(function(){ hasNew(); },10*60*1000);

    if(isLogin) { $(".login").hide(); }
    else{  $(".logout").hide(); $(".del,.config").hide();   }

});

//-->
</script>

<script>
  //写在common.js文件中用来调用即可 , https://www.jb51.net/article/125830.htm
  //1获取滚动条当前的位置
  function getScrollTop() {
   var scrollTop = 0;
   if (document.documentElement && document.documentElement.scrollTop) {
    scrollTop = document.documentElement.scrollTop;
   } else if (document.body) {
    scrollTop = document.body.scrollTop;
   }
   return scrollTop;
  };
  //2回到顶部
  function toTop(n) {
  	var q= $(window).height()+100 ;
   $(window).on('scroll', function() { 
    if ($("#totop").size() > 0) {  //存在
     if (getScrollTop() < q ) {  //屏幕小
      $("#totop").hide(); 
     }else{
     	$("#totop").show(); 
     	}
    } else {  //不存在
     if (getScrollTop() >= q) { // 超出
      $("body").append("<div id='totop'><a href='#' style='color:white;text-decoration : none'>TOP</a></div>");
      //插入了新标签 ，记得添加样式！
      $("#totop").on('click', function() {
         $('body,html').animate({ scrollTop: 0 }, 600, 'swing' , function(){});
      });
     }
    }
     
   });
  };

  $(function(){
  	if( $(window).width()>700 ) toTop();
  })
 </script>
 



<script> 
  $(function(){


  			var show_res=function(meizi){ 
 layer.closeAll();
  				var html=[];
  				html.push("<table cellpadding='4' cellspacing='0' border='0' align='center' width='500px' >"
							+"<tr><td align='center'><img src='"+meizi.big+"' style='max-height:400px; max-width:400px;' referrerpolicy='no-referrer' /></td></tr>"
  							+"<tr><td align='center'>收录时间："+meizi.createdate+"</td></tr></table>");
					layer.open({
					  type: 1,
					  skin: 'layui-layer-rim', //加上边框
					  area: ['500',480], //宽高
					  title: "<b>"+"MD5: "+meizi.md5+"</b>", //不显示标题
					  content: html.join("") ,
					  btn: ['查看','关闭'] ,
						btnAlign: 'c',
success: function(layero, index){
 $("div.layui-layer.layui-layer-page").css({'top':'10px'});
} ,
resizing: function(layero){
 $("div.layui-layer.layui-layer-page").css({'top':'10px'});
} ,
					end: function (){ 
						layer.closeAll();
					} , 
yes: function(index, layero){ 
	var src="${ctx}/meizi/"+meizi.md5;
	window.open(src);
//	window.location.href=src;
	 layer.closeAll();
 },
btn2: function(index, layero){ } , 
btn3: function(index, layero){ }


					 });
  			};


  	var for_search=function(){
       		var val=$("input.search","div.search").val();
        	val=$.trim(val);
        	if( ""==val || val.length<10 ){ return false;}
        	$.post("${ctx}/search",{val:val},function(res){
        		if("0" != res.code ) { alert('没有收录该Meizi'); layer.msg("没有收录该Meizi"); }
        		else { show_res (res.meizi) ; }
        	});
  	};

        $("div.search").on("click","a.search",function(){ for_search(); });
        
        $("input.search","div.search").keydown(function(event) {
	        switch (event.keyCode) {
	            case 13:  //13表示回车
	                for_search();
	        }
        }) ;        

        $("html,body").keydown(function(event) {
                switch (event.keyCode) {
                    case 27:  // 27 是 ESC
                         layer.closeAll();
                }
        }) ;

setInterval( function(){
 $("div.layui-layer.layui-layer-page").css({'top':'10px'});
},500);

  })
 </script>



<!--  -->
	</head>
	<body>

		<div style='margin: 18px;'>
			<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" >
				<tr>
					<td width='30%'><div>
						<a href="javascript:void(0)" class='flash'>刷新</a>
						<a href="mit.html" class='' style='color:red'>请读我</a>					
						<!-- <a href="javascript:void(0)" class='catch'>抓一把</a> -->
						<span class='alert'></span>
						<span class='hasNew'></span></div>
					 </td>

<!---
                                                <td align='center'>
<div class='search' style=" border-width: 2px; border-style: inset; border-color: initial; border-image: initial; text-align:left;">
<input type="text" class="search " value="" style='border: 0px; font-size:1.2em; width:90%; ' placeholder="" title="用图片URL或MD5值可以查询图片信息"></input>
<a href="#" class='search' style="background-image:url('https://img.t.sinajs.cn/t6/style/images/connect/finder/1087030002_892_1003_0.png');background-size:28px 28px; background-repeat:no-repeat; text-decoration:none; ">&nbsp; &nbsp; &nbsp;  </a>
</div>
                                                </td>
-->

					 	<td align='center'>
					 		 <span style='font-size:1.5em'>个人学习, 纯属娱乐</span>
					 	</td>
					<td width='30%'><div style="TEXT-ALIGN: right">
						<a href="javascript:void(0)" class='del'>删除列表</a>
						<a href="${ctx}/watch" >抓取情况统计</a>
						<a href="#" class='config'>系统配置</a>
						<a href="#" class='logout'>退出</a>
						<a href="#" class='login'>登陆</a>
						</div>
					</td>
				</tr>
			</table>
		</div>

		<hr>

		<div style="margin: 24px 120px; TEXT-ALIGN: center;" class="imgs">
			<c:forEach items="${meizi.list}" var="m">
				<a href="javascript:void(0)" class="image"><img src="${m.small}" referrerpolicy="no-referrer"  onerror="javascript:this.remove()"
						src_big="${m.big}" class="img_show" src_md5="${m.md5}"
						style='max-height: 200px; ' /></a>
			</c:forEach>
		</div>

		<hr>

		<div style='margin: 24px'>
			<!--<div style=''><a href="javascript:void(0)" class='more' tilte='支持方向键'>加载更多...</a></div> -->
			<!-- <div style='TEXT-ALIGN: center; margin-top:12px; '>纯属娱乐</div> -->
			<div style='TEXT-ALIGN: center; padding:2px;'>
			<span>个人学习, 纯属娱乐</span>
			</div>

		</div>
	</body>
</html>

